<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>WireMock Admin</title>
		<link type="text/css" href="css/ui-darkness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript" src="js/wiremock-admin.js"></script>
		<script type="text/javascript" src="js/admin-page-behaviour.js"></script>
		
		<link type="text/css" href="css/admin-styles.css" rel="stylesheet" />
	</head>
	
	<body>
		<h1 class="demoHeader">WireMock Admin</h2>
		<div id="tabs">
			<ul>
				<li><a href="#stubMappingTab">Stub Mappings</a></li>
			</ul>
			<div id="stubMappingTab">
				<h2>Add new stub mapping</h2>
				<form name="newStubMappingForm" id="newStubMappingForm">
					<fieldset name="request" title="Request Pattern">
						<legend>Request Pattern</legend>
						<p>
							<label for="url">Method: </label>
							<select name="requestMethod" id="requestMethod">
								<option>GET</option>
								<option>POST</option>
								<option>PUT</option>
								<option>DELETE</option>
								<option>OPTIONS</option>
								<option>TRACE</option>
								<option>HEAD</option>
							</select>
						</p>
					
						<p>
							<label for="url">URL: </label>
							<input name="url" id="url" type="text" size="100" />
							<select name="urlSpecType">
								<option>Exact</option>
								<option>Regex</option>
							</select>
						</p>
						
						<p id="requestHeaders">
							<label>Headers: </label>
							<button id="addRequestHeaderButton" name="addRequestHeaderButton" type="button" title="Add request header">New</button>
						</p>
					</fieldset>
					
					<fieldset name="response" title="Response">
						<legend>Response</legend>
						
						<p>
							<label for="responseType">Type: </label>
							<select name="responseType">
								<option>Body</option>
								<option>Body file</option>
								<option>Proxy</option>
							</select>
						</p>
						
						<p>
							<label for="status">Status: </label>
							<input name="status" id="status" type="text" size="3" value="200"/>
						</p>
						
						<p id="responseHeaders">
							<label>Headers: </label>
							<button id="addResponseHeaderButton" name="addResponseHeaderButton" type="button" title="Add response header">New</button>
						</p>
						
						<p>
							<label for="body">Body: </label>
							<textarea rows="20" cols="100" name="body" id="body"></textarea>
						</p>
						
						<p>
							<label>Add delay: </label>
							<input id="addFixedDelayCheckbox" name="addFixedDelayCheckbox" type="checkbox"/>
							<span class="midFormRowText">of</span>
							<input id="fixedDelayMilliseconds" name="fixedDelayMilliseconds" type="text" size="10"/>
							<span>milliseconds</span> 
						</p>
					</fieldset>
					
					<fieldset name="priority" title="Priority">
						<legend>Priority</legend>
						<label for="lowPriority">Low priority:</label>
						<input id="lowPriorityCheckBox" name="lowPriority" type="checkbox" />
					</fieldset>
					
					<button id="addButton" type="button" name="add" value="Add" title="Add">Add</button>
				</form>
			</div>
		</div>
		
		<div id="stubMappingErrorDialog">
			<p>Failed to create stub mapping</p>
		</div>
	</body>
</html>